<template>

  <el-tabs type="card" v-model="activeName" @tab-click="">
    <el-tab-pane label="答卷列表" name="first">
      <div class="main">
        <div class="topBlock">
          <el-button @click="" size="medium" icon="el-icon-plus"></el-button>
          <!--          <el-button @click="" size="medium" icon="el-icon-delete-solid"></el-button>-->
        </div>
        <el-table
            :header-cell-style="{'border': 'none',textAlign:'center'}"
            :cell-style="{'border': 'true',textAlign:'center',}"
            :data="answerPaperList"
            style="width: 100%">
          <el-table-column type="index" label="序号"/>
          <el-table-column prop="exam.paper.paperTitle" label="试卷名称"/>
          <el-table-column prop="submitTime" :formatter="formatExamSubmitTime" label="提交时间"/>
          <el-table-column prop="exam.teacher.userName" label="组织老师"/>
          <el-table-column prop="viewTime" :formatter="formatExamViewTime" label="预览开放时间"/>
          <el-table-column prop=""  label="状态">
            <template slot-scope="{ row }" style="display: flex;  flex-direction: row;">
              <span v-if="row.isCorrect==0"><el-tag type="info">未批改</el-tag></span>
              <span v-else><el-tag type="success">已批改</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" width="300">
            <template slot-scope="scope">
              <!--                <el-button-group>-->
              <el-button type="primary" @click="getAnswerPaperView(scope.row)" size="mini" icon="el-icon-document">预览答卷
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import {getAnswerPaperListApi, getAnswerPaperViewApi} from "@/api/AnswerPaper";
import {Storage} from '@/utils/localStorage'
import {Message} from "element-ui";
const storage = new Storage();

export default {
  name: "AnswerListStuView",
  data(){
    return{
      activeName: 'first',
      answerPaperList:[]
    }
  },
  methods:{
    formatExamViewTime(row){
      // 获取原始时间戳
      const timestamp = new Date(row.exam.viewTime);
      // 获取当前时间的年份
      const currentYear = new Date().getFullYear();
      // 获取时间字符串中的年份
      const year = timestamp.getFullYear();
      // 如果当前时间的年份与时间字符串中的年份相同，只显示月日时分，否则显示年月日时分
      if (year === currentYear) {
        return `${(timestamp.getMonth() + 1).toString().padStart(2, '0')}-${timestamp.getDate().toString().padStart(2, '0')} ${timestamp.getHours().toString().padStart(2, '0')}:${timestamp.getMinutes().toString().padStart(2, '0')}`
      } else {
        return row.exam.viewTime;
      }
    },
    formatExamSubmitTime(row) {
      // 获取原始时间戳
      const timestamp = new Date(row.submitTime);
      // 获取当前时间的年份
      const currentYear = new Date().getFullYear();
      // 获取时间字符串中的年份
      const year = timestamp.getFullYear();
      // 如果当前时间的年份与时间字符串中的年份相同，只显示月日时分，否则显示年月日时分
      if (year === currentYear) {
        return `${(timestamp.getMonth() + 1).toString().padStart(2, '0')}-${timestamp.getDate().toString().padStart(2, '0')} ${timestamp.getHours().toString().padStart(2, '0')}:${timestamp.getMinutes().toString().padStart(2, '0')}`
      } else {
        return row.submitTime;
      }
    },
    getAnswerPaperList(){
      let studentId = storage.getItem("user").id;
      // console.info(studentId);
      getAnswerPaperListApi({studentId:studentId}).then(res=>{
        if (res.data.code == 200){
          this.answerPaperList = res.data.data;
          console.info(this.answerPaperList)
        }
      })
    },
    getAnswerPaperView(row){

      if (new Date(row.exam.viewTime)>new Date()){
        Message.warning('未到预览开放时间!')
      }else {
        let answerPaper = row;
        this.$router.push({
          name: 'AnswerPaperStuView',
          params: {
            answerPaper: answerPaper,
          },
        })
      }


    }
  },
  created() {
    this.getAnswerPaperList()
  }
}
</script>

<style scoped>

.topBlock {
  display: flex;
  /*background-color: #42b983;*/
  height: 46px;
  align-items: center;
  justify-content: start;
  /*border-left: 1px solid #e6e6e6;*/
  /*border-right: 1px solid #e6e6e6;*/
  /*background-color: #f5f5f5;*/
  border-radius: 5px;
}

.main {
  height: 700px;
  /*background-color: #42b983;*/
}

</style>